<template>
  <el-dialog v-model="dialogVisible" :title="`删除${dialogTitle}`" width="500" height="500" center>
    <span>是否删除此用户, 删除后不可恢复</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="goDelete()">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, inject } from 'vue'
import { ElMessage } from 'element-plus'
import { deleteUserAPI, getUserInfoAPI } from '../../../api/userinfo'
import { tracking } from '../../../utils/operate.js'

const dialogVisible = ref(false)
const dialogTitle = ref('')
const userId = ref('')
const userAccount = ref('')

const props = defineProps<{
  closeDialog: Function,
}>()

// 从父组件注入方法
const getFirstPage = inject('getFirstPage', () => { }) as () => void

// 打开弹框
const openDialog = (id, account) => {
  dialogVisible.value = true
  userAccount.value = account
  userId.value = id
  getDeleteTracking(id)
}

let deleteName = ref()

// 获取用户姓名以便 传给 tracking
const getDeleteTracking = async (id) => {
  const res = await getUserInfoAPI(id)
  if (res.data.status === 0) {
    deleteName.value = res.data.data.name
  }
}


const goDelete = async () => {
  const res = await deleteUserAPI({ id: userId.value, account: userAccount.value })
  if (res.data.status === 0) {
    ElMessage({
      message: res.data.message,
      type: 'success'
    })
    dialogVisible.value = false
    getFirstPage()
    props.closeDialog()
    tracking("用户管理", "删除了用户", deleteName.value, "高级")
  } else {
    ElMessage({
      message: res.data.message,
      type: 'error'
    })
  }

}


defineExpose({
  openDialog
})
</script>